<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="perm" uri="/WEB-INF/tld/perm.tld"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
	<script>var ctx="${ctx}";</script>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>首媒管理平台</title>
	    <meta name="keywords" content="体验,友好,高级管理台,易用,高性能,高扩展性,bootstrap框架,响应式后台">
	    <meta name="description" content="这是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
	    <meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="Wed, 26 Feb 209908:21:57 GMT"> 
	    <!--[if lt IE 8]>
	    <meta http-equiv="refresh" content="0;ie.html" />
	    <![endif]-->
	    <link rel="shortcut icon" href="favicon.ico"> 
		<link rel="shortcut icon" href="favicon.ico"> 
		<link href="${ctx}/static/css/bootstrap.min.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/font-awesome.min.css?v=4.4.0?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/footable/footable.core.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/summernote/summernote.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/summernote/summernote-bs3.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/plugins/laypage/laypage.css?v=${static_version}"  rel="stylesheet">
		<link href="${ctx}/static/css/plugins/chosen/chosen.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/jsTree/style.min.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/iCheck/custom.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/animate.min.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/js/plugins/layer/laydate/laydate.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/plugins/webuploader/webuploader.css?v=${static_version}" rel="stylesheet">
		<link href="${ctx}/static/css/style.min.css?v=4.0.0" rel="stylesheet">
	    
	</head>
	<body class="gray-bg" id="sysRole_body">
    	<div class="ibox float-e-margins">
    		<div class="ibox-content">
    			<div class="row">
       				<div class="col-sm-9">
                   		<form class="form-group" id="sysRole_table_form">	
		                	<input type="hidden" name="orderBy" value="create_date desc">
		                	<div class="row">
		                		<perm:hasPermission code="role/find">
		                        <div class="col-md-4 col-sm-2"><input name="keyword" type="text" placeholder="请输入关键字" class="form-control" /></div>
								<div class="col-md-2 col-sm-4">
									<button id="sysRole_table_search" type="button" class="btn btn-outline btn-block btn-primary">查询</button>
								</div>
								</perm:hasPermission>
								<perm:hasPermission code="role/insertGet">
							    <div class="col-md-2 col-sm-4 pull-right ">
									<button  onclick="clickInsertGet()"  type="button" class="btn btn-block btn-outline btn-primary">添加</button>
							    </div>
							    </perm:hasPermission>
		                    </div>
		                </form>
						<table id="sysRole_table" data-action="${ctx}/role/find" data-datatable="true"  class="footable table table-stripped toggle-arrow-tiny">
						  	<thead>
							  	<tr>
							  		<th  data-ignore="true" data-hide="all" data-title ="id">ID</th>
									<th  data-sort-ignore="true" data-title ="name" >角色名称</th>
									<th  data-sort-ignore="true" data-title ="remark" >角色描述</th>
								  	<th  data-sort-ignore="true" data-crud="true" data-title='{"uid":"id"}' data-hide="phone">操作
					      			  <div style="display: none;" class="center hidden-phone">
					      			  	<perm:hasPermission code="role/updateGet">
					      			  		<button onclick="clickUpdateGet(this)" style="margin-left:3px;margin-top:3px"  data-title="更新" data-url="${ctx}/role/update"  data-id=":uid" type="button" style="margin-right:5px" class="btn btn-info btn-outline btn-xs"><i class="fa fa-pencil"></i>&nbsp;更新</button>
									  	</perm:hasPermission>
									  	<perm:hasPermission code="role/delete">
					      			  		<button onclick="deleteData(this)" data-url="${ctx}/role/delete" style="margin-left:3px;margin-top:3px" data-id=":uid" type="button" class="btn btn-danger btn-outline btn-xs"><i class="fa fa-times"></i>&nbsp;删除</button>
									  	</perm:hasPermission>
										</div> 
				      		      	</th>
							  	</tr>
						  	</thead>
						  	<tbody>
						  	</tbody>
					  	</table>
					  	<div class="row">
					  		<div class="col-md-4" class="pull-left" id="page_left_text"></div>
					  		<div class="col-md-8"  id="page_text"></div>
					  	</div>
					</div>
					<div class="col-sm-3">
						<form class="form-group" id="sysRole_table_form">	
		                	<input type="hidden" name="orderBy" value="create_date desc">
		                	<div class="row">
								<button id="saveTreeChangeNodeId" onclick="saveTreeChangeNode(this)" type="button" class="btn btn-block">保存</button>
		                    </div>
		                </form>
						<div id="sysUser_role_tree"></div>
					</div>
    			</div>
			</div>
		</div>
		
	<script src="${ctx}/static/js/jquery.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/bootstrap.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/footable/footable.all.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/validate/jquery.validate.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/validate/messages_zh.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/webuploader/webuploader.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/summernote/summernote.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/summernote/summernote-zh-CN.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/chosen/chosen.jquery.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/layer/laydate/laydate.js?v=${static_version}"></script>
	<script src="${ctx}/static/plugins/laypage/laypage.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/jsTree/jstree.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/switchery/switchery.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/eModal.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/cookie.js?v=?v=${static_version}"></script>
	<script src="${ctx}/static/common/custom-datatable.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/content.min.js?v=${static_version}"></script>
	<script src="${ctx}/static/common/common.js?v=${static_version}"></script>
	<script src="${ctx}/static/js/plugins/layer/layer.js?v=${static_version}"></script>
	
	<script>
	
	var deleteData=function(me){
		$.confirm({
		    text:"确定删除此条信息吗!",
		    confirm: function() {
		    	$.ajax({  
   	 		    	url: "${ctx}/role/delete",
   	    	        title:'删除此条信息！',
   					data:{
   						id:$(me).data("id"),
   					},   
					type: 'POST',
	 					dataType:'json',  
	 					success:function(response){
	 						if(response.code==0){
	 							$("#sysRole_table_search").click();
	 							layer.msg('删除成功！', {icon: 1});
	 						}else if(response.code==1){
	 							layer.msg(response.message, {icon: 5});
	 						}else{
	 							  layer.msg('删除失败！', {icon: 5});
	 						}
	 					}  
	 			    });  
		    },
		    cancel: function() {
		        return true;
		    }
		});
	}

	
		var treeCheckIds=[];
	
	    var loadAjaxTree=function(url){
	    	
	    	$("#saveTreeChangeNodeId").removeClass("btn-outline btn-primary");  
	    	
			$.ajax({  
				url:url,  
				type: 'POST',
				dataType:'json',  
				success:function(response){
					treeCheckIds=response.data.checkData||[];
					var treeData=response.data.treeData;
					jQuery('#sysUser_role_tree').jstree("destroy");
					jQuery('#sysUser_role_tree').bind("loaded.jstree",function(e,data){
	                    for(var i=0;i<treeCheckIds.length;i++){
	                       jQuery('#sysUser_role_tree').jstree("check_node","#"+treeCheckIds[i]);  
	                    }  
					 }).bind("changed.jstree",function (e, data) {
						 var i, j, r = [];
					     for(i = 0, j = data.selected.length; i < j; i++) {
					       r.push(data.instance.get_node(data.selected[i]).text);
					     }
					     console.log('Selected: ' + r.join(', '));
				          $("#saveTreeChangeNodeId").addClass(" btn-outline btn-primary ");  
			         }).jstree({  
			             "core" : { 
			            	 "data":treeData,
				             "attr":{  
				                 "class":"jstree-checked"  
				             }  
			             },  
			             "types" : {  
			            	"default" : {  
			              		"valid_children" : ["default","file"]  
			            	},  
			            	"file" : {  
			              		"icon" : "glyphicon glyphicon-file",  
			              		"valid_children" : []  
			            	}  
			          	},  
			          	"checkbox" : {  
			              	"keep_selected_style":false,  
			              	"real_checkboxes" : true  
			          	},  
			          	"plugins" : [  
			            	"contextmenu", "dnd", "search",  
			            	"types", "wholerow","checkbox"  
			          	],  
			          	"contextmenu":{  
			            	"items":{  
			               	 	"create":null,  
			                	"rename":null,  
			                	"remove":null,  
			                	"ccp":null  
			            	}  
			          	}  
			        });  
				}  
		    }); 
		}
		
	    var roleId="";
	    
		$(document).ready(function() {
			loadAjaxTree("${ctx}/resource/findRoleResource");
			init_page_datatable("#sysRole_table",function(){
				$("#sysRole_table").delegate('tr:gt(0)', 'click', function() {
					 roleId=$.trim($(this).find("td:first").text());
					 loadAjaxTree("${ctx}/resource/findRoleResource?roleId="+roleId);
			    });
			});
		});
		
		var arrExits=function(arr,sid){
			for(var i=0;i<arr.length;i++){  
                if(sid==arr[i]){  
                    return true;
                }  
            } 
			return false;
		}
		
		var getParentIds=function(parentIds,id){
			var parentId=$('#'+id).parent().parent().attr('id');//通过子元素id获取父元素
			if(parentId!=null && parentId != "undefined" &&  parentId.length>0){
				if("sysUser_role_tree" == parentId){
					return false;
				}
				parentIds.push(parentId);
			}
			var parentId2=$('#'+parentId).parent().parent().attr('id');//通过子元素id获取父元素
			if(parentId2!=null && parentId2 != "undefined" && parentId2.length>0){
				if("sysUser_role_tree" === parentId2){
					return false;
				}
				parentIds.push(parentId2);
				getParentIds(parentIds,parentId2);
			}
		}
		
		var saveTreeChangeNode=function(){

			if(!$("#saveTreeChangeNodeId").hasClass("btn-outline")){
				return;
			}
			
			var removeResourceIds=[];
			var insertResourceIds=[];
			
			//treeCheckIds
			var selectedElms=jQuery('#sysUser_role_tree').jstree(true).get_selected();
			
			//确定是新增加的
			$.each(selectedElms, function() {
				getParentIds(selectedElms,this);
    		});
			
			//确定是新增加的
			$.each(selectedElms, function() {
				var sid=this;
				if(!arrExits(treeCheckIds,sid)){
					insertResourceIds.push(sid);
				}
    		});
			
			for(var i=0;i<treeCheckIds.length;i++){ 
				var hasVales=false;
				for(var j=0;j<selectedElms.length;j++){  
	                if(selectedElms[j]==treeCheckIds[i]){  
	                	hasVales=true;
	                }  
	            } 
				if(!hasVales){
					removeResourceIds.push(treeCheckIds[i]);
				}
            } 
			
			/**/
			$.ajax({
				url:'${ctx}/role/insertTwo',  
				data:{
					removeResourceIds:removeResourceIds.join(","),	
					insertResourceIds:insertResourceIds.join(","),	
					roleId:roleId	
				},   
				type: 'POST',
				dataType:'json',  
				success:function(response){
					if(response.code==0){
					}else{
					    $.confirm({cancelButton: "关   闭",title: '提示!',content: "保存角色权限错误!"||"保存数据错误!"});
					}
				}  
		    }); 
			
		}
	
		var clickInsertGet=function(){
			var moduleIds=$("#chosen-select2").val();
			eModal.ajax({
	   	        url: "${ctx}/role/insertGet",
	   	        title:'添加角色',
	   	        loading:true,
	   	        size: eModal.size.sm,
	   	        subtitle: '',
	   	        buttons: [
	   	            {text: '保存', style: 'info',   close: false, click:function(){
	   	 		    	$.ajax({  
	   	 					url:'${ctx}/role/add',  
	   	 					data:{
								name:$("#name").val(),							
								remark:$("#remark").val(),							
								moduleId:moduleIds,	
								id:$("#id").val()
							},   
							type: 'POST',
	   	 					dataType:'json',  
	   	 					success:function(response){
	   	 						if(response.code==0){
	   	 							eModal.close();
	   	 							$("#sysRole_table_search").click();
	   	 						}else{
	   	 						    $.confirm({cancelButton: "关   闭",title: '提示!',content:"添加角色错误!"||"保存数据错误!"});
	   	 						}
	   	 					}  
	   	 			    }); 
	   	            }},{text: '取消', style: 'danger', close: false, click:function(){
	   	            	eModal.close();
	   	            }}
	   	        ],
	   	    });
		}
		
		var clickUpdateGet=function(me){
			var moduleIds=$("#chosen-select2").val();
			eModal.ajax({
	   	        url: "${ctx}/role/updateGet?id="+$(me).data("id"),
	   	        title:'修改角色',
	   	        loading:true,
	   	        size: eModal.size.sm,
	   	        subtitle: '',
	   	        buttons: [
	   	            {text: '保存', style: 'info',   close: false, click:function(){
	   	 		    	$.ajax({  
	   	 					url:'${ctx}/role/update',  
	   	 					data:{
								name:$("#name").val(),							
								remark:$("#remark").val(),							
								moduleId:moduleIds,	
								id:$("#id").val()
							},   
							type: 'POST',
	   	 					dataType:'json',  
	   	 					success:function(response){
	   	 						if(response.code==0){
	   	 							eModal.close();
	   	 							$("#sysRole_table_search").click();
	   	 						}else{
	   	 						    $.confirm({cancelButton: "关   闭",title: '提示!',content:"修改错误!"||"保存数据错误!"});
	   	 						}
	   	 					}  
	   	 			    }); 
	   	            }},{text: '取消', style: 'danger', close: false, click:function(){
	   	            	eModal.close();
	   	            }}
	   	        ],
	   	    });
			return false;
		}
		
	</script>
	
	</body>
</html>